<template>
    <div class="login">
        <div class="header">
            <p @click="back()" class="back">
                <Icon type="chevron-left"></Icon>
            </p>
            <div class="title">
                <p v-if="type === 'login'">登入</p>
                <p v-if="type === 'register'">注册</p>
            </div>
        </div>
        <div v-if="type === 'login'" class="logincontainer">
            <div class="loginlable">
                <Icon type="ios-person-outline"></Icon>
                <input type="text" v-model="loginPhone"
                       placeholder="请输入手机号">
            </div>
            <div class="loginlable">
                <Icon type="ios-locked-outline"></Icon>
                <input type="password" v-model="loginPassWord" placeholder="请输入密码">
            </div>
            <div class="buttonlable">
                <Button style="width: 80%" @click="login(loginPhone,loginPassWord)">登入</Button>
                <!--<a href="#" @click="">我要注册</a>-->
            </div>
            <div class="linklable">
                <router-link to="/login?type=register">我要注册</router-link>
                <router-link to="/login?type=login">找回密码</router-link>
            </div>
        </div>
        <div v-if="type === 'register'" class="registercontainer">
            <div class="registerstep" v-if="registerStep === 1">
                <div class="registerlable">
                    <Icon type="ios-person-outline"></Icon>
                    <input type="number" v-model="registerPhone" :style="{'color':phoneJudge?'#009933':'#990000'}"
                           placeholder="请输入手机号">
                </div>
                <div class="registerlable">
                    <Icon type="ios-email-outline"></Icon>
                    <input type="number" v-model="identifyingCode" placeholder="请输入验证码">
                    <Button class="codebutton" @click="getCode" :disabled="!!timer" style="width: 100px">
                        <p v-if="!timer">点击发送</p>
                        <p v-if="timer">{{count}}</p>
                    </Button>
                </div>
                <div class="buttonlable">
                    <Button style="width: 100%" @click="nextStep">下一步</Button>
                </div>
                <Steps :current="0" class="registerstep" direction="vertical">
                    <Step title="确认手机号" content="请填入获取的验证码"></Step>
                    <Step title="确认密码" content="请输入您的密码(6-12位数字、字母)"></Step>
                </Steps>
            </div>
            <div class="registerstep" v-if="registerStep === 2">
                <div class="registerlable">
                    <Icon type="ios-unlocked-outline"></Icon>
                    <input type="text" v-model="registerPassword" :style="{'color':passwordJudge?'#009933':'#990000'}"
                           placeholder="请输入密码">
                </div>
                <div class="registerlable">
                    <Icon type="ios-locked-outline"></Icon>
                    <input type="text" v-model="confirmPassword"
                           :style="{'color':this.registerPassword === this.confirmPassword?'#009933':'#990000'}"
                           placeholder="确认密码">
                </div>
                <div class="buttonlable">
                    <Button style="width: 100%" @click="addUser">确认</Button>
                </div>
                <Steps :current="1" class="registerstep" direction="vertical">
                    <Step title="确认手机号" content="请填入获取的验证码"></Step>
                    <Step title="确认密码" content="请输入您的密码(6-18位数字、字母)"></Step>
                </Steps>
            </div>
        </div>
    </div>
</template>

<script>
    import * as appInfo from '@/conf/appInfo';

    export default {
        name: 'login',
        data() {
            return {
                refer: '', // 确定网站来源
                type: 'login', // 默认进入路由
                loginPhone: '',
                loginPassWord: '',
                registerPhone: '',
                registerPassword: '',
                confirmPassword: '',
                registerStep: 1,
                identifyingCode: '', // 验证码确认
                phoneJudge: false,
                passwordJudge: false,
                timer: null,
                count: ''
            };
        },
        created() {
            console.log(this.$route.query);
            if (this.$route.query.type === 'login' ||
                this.$route.query.type === 'register') { // 路由需要正确 登入或注册
                // 进入页面判断是否包含注册信息
                this.type = this.$route.query.type;
                if (this.CONF.user) {
                    this.$router.push({name: 'index'});
                }
            } else {
                this.$Modal.warning({
                    title: 'tip',
                    content: '请您从正确链接进入',
                    onOk: () => {
                        this.$router.push({name: 'index'});
                    }
                });
            }
        },
        mounted() {
        },
        methods: {
            login(phone, password) {
                const phreg = /^[1][3,4,5,7,8,6][0-9]{9}$/;
                const pwreg = /^[0-9A-Za-z]{6,18}$/;
                console.log(phone, password);
                if (!phreg.test(phone) || !pwreg.test(password)) {
                    this.$Modal.error({content: '账号密码格式有误！'});
                } else {
                    this.$Utils.login.localLogin({
                        phone,
                        password
                    }).then(() => {
                        console.log('token获取成功');
                        return this.$Utils.login.getUserInfo();
                    }).then((userInfo) => {
                        console.log(userInfo);
                        if (userInfo.error_msg) {
                            this.$Modal.error({content: userInfo.error_msg});
                        } else {
                            this.$router.push({name: 'index'});
                        }
                    }).catch((error) => {
                        if (error.body) {
                            this.$Modal.error({content: error.bodyText});
                        } else {
                            this.$Modal.error({content: '登入失败，请稍后再试~'});
                        }
                    });
                }
            },
            getCode() { // 获取验证码
                if (this.phoneJudge) { // 前端判断电话号码合法
                    this.$Api.getCode({phone: this.registerPhone}).then((res) => {
                        if (!res.ok) {
                            if (res.bodyText) {
                                this.$Modal.error({content: res.bodyText});
                            } else {
                                this.$Modal.error({content: '请求失败，请稍后再试~'});
                            }
                        } else {
                            const TIME_COUNT = 60;
                            if (!this.timer) {
                                this.count = TIME_COUNT;
                                this.timer = setInterval(() => {
                                    if (this.count > 0 && this.count <= TIME_COUNT) {
                                        this.count--;
                                    } else {
                                        clearInterval(this.timer);
                                        this.timer = null;
                                    }
                                }, 1000);
                            }
                        }
                    }).catch((error) => {
                        if (error.body) {
                            this.$Modal.error({content: error.bodyText});
                        } else {
                            this.$Modal.error({content: '请求失败，请稍后再试~'});
                        }
                    });
                }
            },
            nextStep() {
                if (this.identifyingCode.length === 5 && this.phoneJudge) { // 判断验证码以及手机号是合法
                    this.$Api.confirmCode({
                        phone: this.registerPhone,
                        code: this.identifyingCode
                    }).then((res) => {
                        if (res.ok) {
                            this.registerStep = 2; // 如果返回正确，进入输入密码环节
                        }
                    }).catch((error) => {
                        if (error.bodyText) {
                            this.$Modal.error({content: error.bodyText});
                        } else {
                            this.$Modal.error({content: '请求失败，请稍后再试~'});
                        }
                    });
                } else {
                    this.$Modal.error({content: '验证码或手机号不合法'});
                }
            },
            addUser() {
                if (!this.passwordJudge) { // 注册用户
                    this.$Modal.error({content: '你的密码输入有误'});
                } else {
                    this.$Api.addUser({
                        phone: this.registerPhone,
                        password: this.registerPassword,
                        confirmPassword: this.confirmPassword
                    }).then((res) => {
                        console.log(this.registerPhone, this.registerPassword);
                        if (res.ok) {
                            this.$Modal.confirm({
                                content: '注册成功，是否直接登入？',
                                onOk: () => {
                                    this.login(this.registerPhone, this.registerPassword);
                                },
                                onCancel: () => {
                                    this.$router.push(
                                        {
                                            name: '/login', params: {type: 'login'}
                                        });
                                }
                            });
                        }
                    }).catch((error) => {
                        if (error.bodyText) {
                            this.$Modal.error({content: error.bodyText});
                        } else {
                            this.$Modal.error({content: '注册失败，请稍后再试'});
                        }
                    });
                }
            },
            back() {
                // 做判断如果是从APP进入到登入页面 返回 否则返回首页
                if (document.referrer.match(appInfo.host) > 0) {
                    window.history.back();
                } else {
                    this.$router.push({
                        name: 'index'
                    });
                }
            }
        },
        watch: {
            registerPhone(val) {
                const myreg = /^[1][3,4,5,7,8,6][0-9]{9}$/;
                if (!myreg.test(val)) {
                    this.phoneJudge = false;
                } else {
                    this.phoneJudge = true;
                }
            },
            registerPassword(val) {
                const myreg = /^[0-9A-Za-z]{6,18}$/;
                if (!myreg.test(val)) {
                    this.passwordJudge = false;
                } else {
                    this.passwordJudge = true;
                }
            },
            $route(val) {
                if (val.query.type === 'login' ||
                    val.query.type === 'register') { // 路由需要正确 登入或注册
                    // 进入页面判断是否包含注册信息
                    this.type = val.query.type;
                    if (this.CONF.user) {
                        this.$router.push({name: 'index'});
                    }
                } else {
                    this.$Modal.warning({
                        title: 'tip',
                        content: '请您从正确链接进入',
                        onOk: () => {
                            this.$router.push({name: 'index'});
                        }
                    });
                }
            }
        }
    }
    ;
</script>

<style lang="scss">
    .login {
        .header {
            position: fixed;
            top: 0px;
            height: 44px;
            width: 100%;
            background: rgb(253, 163, 62);
            display: flex;
            .back {
                line-height: 44px;
                position: fixed;
                left: 0px;
                color: white;
                width: 44px;
                height: 44px;
            }
            .title {
                justify-content: center;
                line-height: 44px;
                width: 100%;
                font-size: 17px;
                color: white;
                font-weight: 300;
            }
        }
        .logincontainer {
            margin-top: 150px;
            display: flex;
            align-items: center;
            flex-direction: column;
            .loginlable {
                width: 80%;
                i {
                    display: block;
                    font-size: 30px;
                    position: absolute;
                }
                input {
                    margin-bottom: 30px;
                    width: 100%;
                    border: none;
                    line-height: 32px;
                    padding-left: 30px;
                    font-size: 18px;
                    font-weight: 300;
                    border-bottom: 1px solid #eeeeee;
                    &:hover, &:focus {
                        box-shadow: none;
                        border-bottom: 1px solid #eeeeee !important;
                        outline-color: white;
                    }
                }
            }
            .buttonlable {
                width: 100%;
                button {
                    color: white;
                    font-size: 20px;
                    margin: 0 auto;
                    display: block;
                    height: 38px;
                    padding: 0;
                    line-height: 38px;
                    background: rgb(253, 163, 62);
                }
            }
            .linklable {
                margin-top: 20px;
                a {
                    color: rgb(253, 163, 62);
                    font-size: 15px;
                }
                display: flex;
                width: 100%;
                justify-content: space-around;
            }
        }
        .registercontainer {
            margin-top: 150px;
            display: flex;
            align-items: center;
            flex-direction: column;
            .registerstep {
                width: 80%;
            }
            .registerstep {
                margin-top: 20px;
            }
            .buttonlable {
                button {
                    color: white;
                    font-size: 20px;
                    margin: 0 auto;
                    display: block;
                    height: 38px;
                    padding: 0;
                    line-height: 38px;
                    background: rgb(253, 163, 62);
                }
            }
            .registerlable {
                width: 100%;
                position: relative;
                i {
                    display: block;
                    font-size: 30px;
                    position: absolute;
                }
                input {
                    margin-bottom: 30px;
                    border: none;
                    width: 100%;
                    line-height: 32px;
                    padding-left: 30px;
                    font-size: 18px;
                    font-weight: 300;
                    border-bottom: 1px solid #eeeeee;
                    &:hover, &:focus {
                        box-shadow: none;
                        border-bottom: 1px solid #eeeeee !important;
                        outline-color: white;
                    }
                }
                .codebutton {
                    position: absolute;
                    right: 0;
                    bottom: 30px;
                    background: rgb(253, 163, 62);
                    color: white;
                }
            }
        }
    }
</style>
